<template>
    <div class="classify-container">
        <div class="top-title">
            <p class="tc">分类</p>
        </div>

        <div class="nav-content">
            <div class="nav-left">
                <div class="controls">
                    <a class="nav-left-item active">螃蟹</a>
                </div>
            </div>

            <div class="content">
                <div class="content-items">
                    <a class="icon-reserve">
                        <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                        <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                        <p class="price">￥&nbsp;38</p>
                    </a>
                    <a>
                        <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                        <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                        <p class="price">￥&nbsp;38</p>
                    </a>
                    <a>
                        <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                        <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                        <p class="price">￥&nbsp;38</p>
                    </a>
                    <a>
                        <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                        <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                        <p class="price">￥&nbsp;38</p>
                    </a>
                    <a>
                        <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                        <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                        <p class="price">￥&nbsp;38</p>
                    </a>
                    <a>
                        <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                        <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                        <p class="price">￥&nbsp;38</p>
                    </a>
                    <a>
                        <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                        <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                        <p class="price">￥&nbsp;38</p>
                    </a>
                </div>
            </div>
        </div>

        <nav class="nav-bar">
            <router-link class="nav-tab-item" to="/index">
                <img src="../../images/index/icon-index.png" class="icon-index">
                <span class="nav-tab-label">首页</span>
            </router-link>
            <router-link class="nav-tab-item" to="/classify">
                <img src="../../images/index/icon-classify-active.png" class="icon-classify">
                <span class="nav-tab-label" style="color:#39BFB3;">分类</span>
            </router-link>
            <router-link class="nav-tab-item" to="/cart">
                <img src="../../images/index/icon-cart.png" class="icon-cart">
                <span class="nav-tab-label">购物车</span>
            </router-link>
            <router-link class="nav-tab-item" to="/user">
                <img src="../../images/index/icon-my.png" class="icon-my">
                <span class="nav-tab-label">我的</span>
            </router-link>
        </nav>
    </div>
</template>

<script>
export default {
  data() { 
    return {
    }
  },
} 
</script>

<style lang="scss" scoped>
@import '../../style/index.css';
.classify-container{
    .nav-content{
        overflow: hidden;
        padding-top: 1rem;
        .nav-left{
            position: fixed;
            height: calc(100% - 1rem);
            width: 1.8rem;
            overflow-y: auto;
            border-right: 1px solid #dfdfdf;
            .controls{
                width: 100%;
                border: 0;
                border-radius: 0;
                border-collapse: collapse;
                font-size: 0.3rem;
                font-weight: 400;
                position: relative;
                display: table;
                overflow: hidden;
                table-layout: fixed;
                border-bottom: 1px solid #dfdfdf;
            }
            .nav-left-item{
                display: block;
                line-height: 50px;
                width: 100%;
                overflow: hidden;
                font-size: 0.3rem;
                color: inherit;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .nav-left-item.active{
                color: #39BFB3;
                position: relative;
            }
            .nav-left-item.active::before{
                content: '';
                display: block;
                height: 100%;
                width: 0.16rem;
                background-color: #39BFB3;
                position: absolute;
                bottom: 0;
                left: 0;
                transform: translateX(-50%);
                border-radius: 0.02rem;
            }
        }
        .content{
            width: calc(100% - 1.8rem);
            float: right;
            
        }
    }
    
}
</style>